<template>
    <div class="cpImgBox" :style="'background-image:url('+imgUrl+');background-size:'+bSize"></div>
</template>

<script>
export default {
    props:{
        url:{
            type:String,
            default:()=>''
        },
        bSize:String
    },
    data(){
        return{
            imgUrl:''
        }
    },
    watch:{
       url(newData,oldData){
           !newData && (this.imgUrl = '/images/course-defalut.jpg')
           this.imgUrl = newData
       }
    },
    created(){
        if(this.url){
            this.imgUrl = this.url
        }else{
            this.imgUrl = '/images/course-defalut.jpg'
        }
    }
}
</script>

<style lang="scss" scoped>
    .cpImgBox{
        width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        background-color: #f1eeee;
    }
</style>